<template>
  <div>
    <div class="comment">
      <div class="submitbox">
        <h3>提交评论</h3>
        <div>
          <mt-field placeholder="请你评论" type="textarea" rows="4" v-model="introduction"></mt-field>
          <mt-button size="small" type="primary" plain @click.native="Submission(detailid)">点击提交</mt-button>
        </div>
      </div>
      <div class="commentbox"  v-if="commentList.length > 0">
        <h3 class="line">评论详情</h3>
        <ul class="comList">
          <li v-for="(itme,index) in commentList" :key="index">
            <h4 class="comment-content">{{itme.content}}</h4>
            <p>
              <span class="comment-user">
                  {{itme.user_name}}
              </span>
              <span class="comment-time">
                  {{itme.add_time | filter}}
              </span>
            </p>
          </li>
        </ul>
      </div>
      <span v-else>暂时还没有评论</span>
      <div class="button-group">
        <mt-button size="large" type="danger" plain v-if="this.switch" @click.native="addlist()">加载更多</mt-button>
        <mt-button size="large" type="default" plain v-else>没有更多数据了</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Toast } from 'mint-ui'
import {getcomments, postcomment} from '@/api'
import qs from 'qs'
export default {
  props: ['detailid'],
  data () {
    return {
      introduction: '',
      switch: true,
      commentList: [], // 接受评论的数据
      pageindex: 1
    }
  },

  components: {
    Button
  },

  computed: {},

  mounted () {
    this.initList()
  },

  methods: {
    // 获取评论数据初始化
    initList () {
      let id = parseInt(this.$route.params.id)
      getcomments(id, this.pageindex)
        .then(res => {
          console.log(res)
          if (res.status === 0) {
            let mun = this.commentList
            this.commentList = [...mun, ...res.message]
            if (res.message.length < 10) {
              this.switch = false
            }
          }
        })
    },
    // 发表评论
    Submission (id) {
      // console.log(id)
      if (!this.introduction.trim()) {
        Toast({
          message: '评论不能为空,请先评论',
          position: 'middle'
        })
      }
      let cid = parseInt(id)
      let contents = {content: this.introduction}
      let content = qs.stringify(contents)
      postcomment(cid, content)
        .then(res => {
          // console.log(res)
          if (res.status === 0) {
            Toast({
              message: res.message,
              position: 'middle'
            })
            this.commentList = []
            this.introduction = ''
            this.pageindex = 1
            this.initList()
          }
        })
    },
    // 加载更多
    addlist () {
      this.pageindex += 1
      this.initList()
    }
  }
}
</script>
<style lang='scss' scoped>
  .inputbox {
    border: 1px solid #999;
  }
  .comment h3 {
    font-weight: bold;
    margin: 10px 0;
    font-size: 14px;
  }
  .line {
    border-top: 1px solid #999;
    padding-top: 10px;
  }
  .commentbox {
    li:not(:last-child) {
      border-bottom: 1px solid #999;
      margin: 5px 0;
    }
    p {
      font-size: 14px;
    }
    .comment-content {
      color: #999;
      font-size: 14px;
    }
  }
  .comment-user,
  .comment-time {
    font-size: 12px;
    color: #26a2ff;
  }
</style>
